<template>
  <div>
    <el-row :gutter="32">
      <el-col :xs="12" :sm="6" style="text-align: center;margin-bottom: 32px;">
        <el-card shadow="hover" @click.native="selectCard (0)">
          <p>疾病总数</p>
          <h1 class="count-class">{{ diseabledCount }}</h1>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" style="text-align: center;margin-bottom: 32px;">
        <el-card shadow="hover" @click.native="selectCard (1)">
          <p>用户总数</p>
          <h1 class="count-class">{{ userCount }}</h1>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" style="text-align: center;margin-bottom: 32px;">
        <el-card shadow="hover" @click.native="selectCard (2)">
          <p>文章总数</p>
          <h1 class="count-class">{{ blogCount }}</h1>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" style="text-align: center;margin-bottom: 32px;">
        <el-card shadow="hover" @click.native="selectCard (3)">
          <p>老人总数</p>
          <h1 class="count-class">{{ elderlyCount }}</h1>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="24" style="text-align: center;">
        <el-card shadow="hover">
          <div class="com-page">
            <DiagramChart
              series-name="近七天浏览量曲线"
              url="/system/dashboard/viewCount"
              x-name="日期"
              y-name="人次"
              style="width: 100%; height: 350px;"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="8" :lg="8" style="text-align: center;margin-bottom: 20px;">
        <el-card class="chart-wrapper" shadow="hover">
          <TagChart
            style="width: 100%;height: 300px;"
            :url="tagUrl"
            :params="params"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8" :lg="8" style="text-align: center;margin-bottom: 20px;">
        <el-card class="chart-wrapper" shadow="hover">
          <TypeChart :url="fullTypeUrl" title="老人年龄段分布图" style="width: 100%;height: 300px;" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8" :lg="8" style="text-align: center;margin-bottom: 20px;">
        <el-card class="chart-wrapper" shadow="hover">
          <VisitorMap style="width: 100%;height: 300px;" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col
        :xs="{span: 24}"
        :sm="{span: 24}"
        :md="{span: 16}"
        :lg="{span: 16}"
        :xl="{span: 16}"
        style="padding-right:8px;margin-bottom:30px;"
      >
        <DangerElderlyList />
      </el-col>
      <el-col
        :xs="{span: 24}"
        :sm="{span: 24}"
        :md="{span: 8}"
        :lg="{span: 8}"
        :xl="{span: 8}"
        style="margin-bottom:30px;"
      >
        <box-card />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import DiagramChart from '@/views/common/DiagramChart'
import BoxCard from './charts/BoxCard'
import VisitorMap from './charts/VisitorMap'
import { mapGetters } from 'vuex'
import { articleSum, diseabledCount, elderlyCount, userCount } from '@/api/dashBoard'
import TagChart from '@/views/common/TagChart'
import TypeChart from '@/views/common/TypeChart'
import DangerElderlyList from '@/views/dashboard/charts/DangerElderlyList'
export default {
  name: 'Dashboard',
  components: {
    VisitorMap, DiagramChart, TagChart, TypeChart, DangerElderlyList, BoxCard
  },
  data() {
    return {
      blogCount: 0,
      diseabledCount: 0,
      userCount: 0,
      elderlyCount: 0,
      selectedCard: 0,
      recommendList: [],
      params: {},
      tagUrl: '',
      fullTypeUrl: '/system/dashboard/getAgeType'
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getCountList()
  },
  methods: {
    getCountList() {
      articleSum().then((response) => {
        this.blogCount = response
      })
      diseabledCount().then((res) => {
        this.diseabledCount = res
        this.tagUrl = '/knowledge/diseabled/randomDisable'
        this.params = { total: res }
      })
      userCount().then((res) => {
        this.userCount = res
      })
      elderlyCount().then((res) => {
        this.elderlyCount = res
      })
    },
    selectCard(id) {
      this.selectedCard = id
      // console.log(this.selectedCard)
    }
  }
}
</script>

<style scoped lang="less">
  .com-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  .el-card:hover {
    cursor: pointer;
  }

  .chart-wrapper {
    height: 300px;
    margin-top: 30px;
  }

  .el-card /deep/ .el-card__body {
    padding: 0;
  }
  .count-class{
    font-weight: bold;
    padding: 10px;
  }
</style>
